<template>
  <Dialog v-model="dialogVisible" title="详情" width="800" class="enhanced-dialog">
    <!-- 弹窗头部 -->
    <div class="dialog-header">
      <div class="header-icon">
        <Icon icon="ep:view" />
      </div>
      <div class="header-content">
        <h4 class="dialog-title">登录日志详情</h4>
        <p class="dialog-subtitle">查看详细的登录记录信息</p>
      </div>
    </div>

    <!-- 详情内容 -->
    <div class="detail-container">
      <el-descriptions :column="1" border class="enhanced-descriptions">
        <!-- 基本信息 -->
        <div class="section-divider">
          <div class="section-title">
            <Icon icon="ep:info-filled" class="section-icon" />
            <span>基本信息</span>
          </div>
        </div>

        <el-descriptions-item label="日志编号" min-width="120" class="detail-item">
          <div class="item-content">
            <Icon icon="ep:key" class="item-icon" />
            <span class="item-text id-text">{{ detailData.id }}</span>
          </div>
        </el-descriptions-item>

        <el-descriptions-item label="操作类型" class="detail-item">
          <div class="item-content">
            <Icon icon="ep:operation" class="item-icon" />
            <dict-tag
              :type="DICT_TYPE.SYSTEM_LOGIN_TYPE"
              :value="detailData.logType"
              class="enhanced-tag"
            />
          </div>
        </el-descriptions-item>

        <!-- 用户信息 -->
        <div class="section-divider">
          <div class="section-title">
            <Icon icon="ep:user" class="section-icon" />
            <span>用户信息</span>
          </div>
        </div>

        <el-descriptions-item label="登陆账号" class="detail-item">
          <div class="item-content">
            <Icon icon="ep:user" class="item-icon" />
            <span class="item-text user-text">{{ detailData.username }}</span>
          </div>
        </el-descriptions-item>

        <el-descriptions-item label="登录地址" class="detail-item">
          <div class="item-content">
            <Icon icon="ep:location" class="item-icon" />
            <span class="item-text ip-text">{{ detailData.userIp }}</span>
          </div>
        </el-descriptions-item>

        <el-descriptions-item label="浏览器" class="detail-item">
          <div class="item-content">
            <Icon icon="ep:monitor" class="item-icon" />
            <span class="item-text agent-text">{{ detailData.userAgent }}</span>
          </div>
        </el-descriptions-item>

        <!-- 登录结果 -->
        <div class="section-divider">
          <div class="section-title">
            <Icon icon="ep:finished" class="section-icon" />
            <span>登录结果</span>
          </div>
        </div>

        <el-descriptions-item label="登陆结果" class="detail-item">
          <div class="item-content">
            <Icon icon="ep:check" class="item-icon" />
            <dict-tag
              :type="DICT_TYPE.SYSTEM_LOGIN_RESULT"
              :value="detailData.result"
              class="enhanced-tag"
            />
          </div>
        </el-descriptions-item>

        <el-descriptions-item label="登录日期" class="detail-item">
          <div class="item-content">
            <Icon icon="ep:clock" class="item-icon" />
            <span class="item-text time-text">{{ formatDate(detailData.createTime) }}</span>
          </div>
        </el-descriptions-item>
      </el-descriptions>
    </div>
  </Dialog>
</template>

<script lang="ts" setup>
import { DICT_TYPE } from '@/utils/dict'
import { formatDate } from '@/utils/formatTime'
import * as LoginLogApi from '@/api/system/loginLog'

defineOptions({ name: 'SystemLoginLogDetail' })

const dialogVisible = ref(false) // 弹窗的是否展示
const detailLoading = ref(false) // 表单的加载中
const detailData = ref({} as LoginLogApi.LoginLogVO) // 详情数据

/** 打开弹窗 */
const open = async (data: LoginLogApi.LoginLogVO) => {
  dialogVisible.value = true
  // 设置数据
  detailLoading.value = true
  try {
    detailData.value = data
  } finally {
    detailLoading.value = false
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
</script>

<style lang="scss" scoped>
// 主题色变量
$primary-color: #0052cc;
$primary-light: rgba(0, 82, 204, 0.1);
$primary-border: rgba(0, 82, 204, 0.3);
$success-color: #67c23a;
$warning-color: #e6a23c;
$danger-color: #f56c6c;
$info-color: #909399;
$text-primary: #303133;
$text-regular: #606266;
$text-secondary: #909399;
$text-placeholder: #c0c4cc;
$border-color: #dcdfe6;
$border-light: #e4e7ed;
$bg-color: #f5f7fa;
$shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
$shadow-base:
  0 2px 4px rgba(0, 0, 0, 0.12),
  0 0 6px rgba(0, 0, 0, 0.04);
$border-radius: 12px;
$border-radius-small: 8px;

/* 弹窗样式 */
.enhanced-dialog {
  :deep(.el-dialog) {
    border-radius: $border-radius;
    overflow: hidden;

    @media (max-width: 768px) {
      width: 95% !important;
      margin: 0 auto;
      max-height: 90vh;
    }
  }

  :deep(.el-dialog__header) {
    padding: 0;
    border-bottom: none;
  }

  :deep(.el-dialog__body) {
    padding: 0;
    max-height: 70vh;
    overflow-y: auto;

    @media (max-width: 768px) {
      max-height: 80vh;
    }
  }

  :deep(.el-dialog__headerbtn) {
    top: 16px;
    right: 16px;
    z-index: 10;

    .el-dialog__close {
      color: white;
      font-size: 18px;

      &:hover {
        color: rgba(255, 255, 255, 0.8);
      }
    }
  }
}

/* 弹窗头部 */
.dialog-header {
  display: flex;
  align-items: center;
  padding: 20px 24px;
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  color: white;

  @media (max-width: 768px) {
    padding: 16px 20px;
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }
}

.header-icon {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: $border-radius-small;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
}

.header-content {
  flex: 1;
  margin-left: 12px;

  @media (max-width: 768px) {
    margin-left: 0;
  }
}

.dialog-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px 0;

  @media (max-width: 768px) {
    font-size: 16px;
  }
}

.dialog-subtitle {
  font-size: 13px;
  opacity: 0.9;
  margin: 0;

  @media (max-width: 768px) {
    font-size: 12px;
  }
}

/* 详情容器 */
.detail-container {
  padding: 24px;
  background: white;

  @media (max-width: 768px) {
    padding: 16px;
  }
}

/* 描述列表样式 */
.enhanced-descriptions {
  :deep(.el-descriptions__header) {
    margin-bottom: 20px;
  }

  :deep(.el-descriptions__body) {
    .el-descriptions__table {
      border-radius: $border-radius-small;
      overflow: hidden;
      box-shadow: $shadow-base;
    }

    .el-descriptions-item__cell {
      border-color: $border-light;
      padding: 16px 20px;
      transition: all 0.3s ease;

      @media (max-width: 768px) {
        padding: 12px 16px;
      }

      &.is-bordered-label {
        background: linear-gradient(135deg, #f8f9ff 0%, #f0f2ff 100%);
        color: $text-primary;
        font-weight: 600;
        border-right: 2px solid $primary-light;
        min-width: 120px;

        @media (max-width: 768px) {
          min-width: 100px;
          font-size: 13px;
        }
      }

      &.is-bordered-content {
        background: white;

        &:hover {
          background: $primary-light;
        }
      }
    }
  }
}

/* 分组标题 */
.section-divider {
  margin: 24px 0 16px 0;

  &:first-child {
    margin-top: 0;
  }

  @media (max-width: 768px) {
    margin: 20px 0 12px 0;
  }
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: linear-gradient(135deg, $primary-color 0%, #1d4ed8 100%);
  color: white;
  border-radius: $border-radius-small;
  font-size: 16px;
  font-weight: 600;
  box-shadow: $shadow-base;

  @media (max-width: 768px) {
    font-size: 14px;
    padding: 10px 14px;
  }
}

.section-icon {
  font-size: 16px;
  flex-shrink: 0;

  @media (max-width: 768px) {
    font-size: 14px;
  }
}

/* 详情项内容 */
.detail-item {
  :deep(.el-descriptions-item__cell) {
    &.is-bordered-content {
      .item-content {
        display: flex;
        align-items: center;
        gap: 8px;
        min-height: 24px;
      }
    }
  }
}

.item-content {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.item-icon {
  font-size: 14px;
  flex-shrink: 0;
  color: $primary-color;

  @media (max-width: 768px) {
    font-size: 13px;
  }
}

.item-text {
  color: $text-regular;
  font-weight: 500;
  word-break: break-all;
  line-height: 1.5;

  @media (max-width: 768px) {
    font-size: 13px;
  }
}

/* 特殊文本样式 */
.id-text {
  color: $primary-color;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  background: $primary-light;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;

  @media (max-width: 768px) {
    font-size: 11px;
    padding: 1px 4px;
  }
}

.user-text {
  color: $success-color;
  font-weight: 600;
  background: rgba(103, 194, 58, 0.1);
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 13px;

  @media (max-width: 768px) {
    font-size: 12px;
    padding: 1px 6px;
  }
}

.ip-text {
  color: $warning-color;
  font-family: 'Courier New', monospace;
  background: rgba(230, 162, 60, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;

  @media (max-width: 768px) {
    font-size: 11px;
    padding: 1px 4px;
  }
}

.agent-text {
  color: $text-secondary;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.02);
  padding: 4px 8px;
  border-radius: 4px;
  max-width: 400px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  @media (max-width: 768px) {
    max-width: 200px;
    font-size: 11px;
    padding: 3px 6px;
  }
}

.time-text {
  color: $info-color;
  font-family: 'Courier New', monospace;
  background: rgba(144, 147, 153, 0.1);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;

  @media (max-width: 768px) {
    font-size: 11px;
    padding: 1px 4px;
  }
}

/* 标签样式 */
.enhanced-tag {
  :deep(.el-tag) {
    border-radius: 6px;
    font-weight: 500;
    padding: 4px 8px;
    font-size: 12px;
    border: none;
    box-shadow: $shadow-base;

    @media (max-width: 768px) {
      font-size: 11px;
      padding: 3px 6px;
    }

    &.el-tag--success {
      background: linear-gradient(135deg, $success-color 0%, #52c41a 100%);
      color: white;
    }

    &.el-tag--warning {
      background: linear-gradient(135deg, $warning-color 0%, #faad14 100%);
      color: white;
    }

    &.el-tag--danger {
      background: linear-gradient(135deg, $danger-color 0%, #ff4d4f 100%);
      color: white;
    }

    &.el-tag--info {
      background: linear-gradient(135deg, $info-color 0%, #8c8c8c 100%);
      color: white;
    }
  }
}

/* 滚动条美化 */
:deep(.el-dialog__body) {
  &::-webkit-scrollbar {
    width: 6px;
  }

  &::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05);
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background: rgba(0, 82, 204, 0.3);
    border-radius: 3px;
    transition: all 0.3s ease;

    &:hover {
      background: rgba(0, 82, 204, 0.5);
    }
  }
}

/* 深色模式适配 */
@media (prefers-color-scheme: dark) {
  .detail-container {
    background: #374151;
  }

  .section-title {
    background: linear-gradient(135deg, #60a5fa 0%, #3b82f6 100%);
    color: white;
  }

  .enhanced-descriptions {
    :deep(.el-descriptions__body) {
      .el-descriptions-item__cell {
        border-color: #4b5563;

        &.is-bordered-label {
          background: #4b5563;
          color: #f9fafb;
          border-right-color: rgba(96, 165, 250, 0.3);
        }

        &.is-bordered-content {
          background: #374151;

          &:hover {
            background: rgba(96, 165, 250, 0.1);
          }
        }
      }
    }
  }

  .item-text {
    color: #f9fafb;
  }

  .item-icon {
    color: #60a5fa;
  }

  .id-text {
    background: rgba(96, 165, 250, 0.1);
    color: #60a5fa;
  }

  .user-text {
    background: rgba(52, 211, 153, 0.1);
    color: #34d399;
  }

  .ip-text {
    background: rgba(251, 191, 36, 0.1);
    color: #fbbf24;
  }

  .agent-text {
    background: rgba(255, 255, 255, 0.05);
    color: #d1d5db;
  }

  .time-text {
    background: rgba(156, 163, 175, 0.1);
    color: #9ca3af;
  }

  .enhanced-tag {
    :deep(.el-tag) {
      &.el-tag--success {
        background: linear-gradient(135deg, #34d399 0%, #10b981 100%);
      }

      &.el-tag--warning {
        background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
      }

      &.el-tag--danger {
        background: linear-gradient(135deg, #f87171 0%, #ef4444 100%);
      }

      &.el-tag--info {
        background: linear-gradient(135deg, #9ca3af 0%, #6b7280 100%);
      }
    }
  }
}

/* 响应式优化 */
@media (max-width: 480px) {
  .dialog-header {
    padding: 12px 16px;
  }

  .detail-container {
    padding: 12px;
  }

  .section-title {
    font-size: 13px;
    padding: 8px 12px;
  }

  .enhanced-descriptions {
    :deep(.el-descriptions__body) {
      .el-descriptions-item__cell {
        padding: 10px 12px;

        &.is-bordered-label {
          font-size: 12px;
          min-width: 80px;
        }
      }
    }
  }

  .item-text {
    font-size: 12px;
  }

  .agent-text {
    max-width: 150px;
    font-size: 10px;
  }

  .id-text,
  .ip-text,
  .time-text {
    font-size: 10px;
  }

  .user-text {
    font-size: 11px;
  }

  .enhanced-tag {
    :deep(.el-tag) {
      font-size: 10px;
      padding: 2px 4px;
    }
  }
}
</style>
